<template>
	<view class="page">
		<headerVue title="添加流动性"></headerVue>
		<view class="box margin20 relative">
			<view class="inner relative">
				<image
					src="../../static/financeManagement/add.png"
					style="width: 88rpx; height: 88rpx; right:70rpx; top: 160rpx;"
					class="absolute"
				></image>
				<view class="li flex-column flex-between">
					<text style="line-height: 1; color: rgba(255, 255, 255, 0.4);">输入</text>
					<view class="flex align-center">
						<input type="number" placeholder="数量" v-model="catNum" @input="catInput"/>
						<view class="coin flex align-center">
							<image src="../../static/coins/cat.png" style="width: 48rpx; height: 48rpx;"></image>
							<text style="line-height: 1; padding-left: 10rpx;">AICAT</text>
						</view>
					</view>
					<view class="using">余额：{{catBalance}}</view>
				</view>
				<view class="li margin20 flex-column flex-between">
					<text style="line-height: 1; color: rgba(255, 255, 255, 0.4);">输入</text>
					<view class="flex align-center">
						<input type="number" placeholder="数量" v-model="usdtNum" @input="usdtInput"/>
						<view class="coin flex align-center">
							<image src="../../static/coins/usdt.png" style="width: 48rpx; height: 48rpx;"></image>
							<text style="line-height: 1; padding-left: 10rpx;">USDT</text>
						</view>
					</view>
					<view class="using">余额：{{usdtBalance}}</view>
				</view>
			</view>

			<view class="title text-center margin40" style="font-size: 32rpx; line-height: 1;">价格与份额</view>

			<view class="w100 flex margin40">
				<view class="w33 flex-column align-center">
					<text style="line-height: 1; font-size: 32rpx;">{{usdtPrice}}</text>
					<u-gap height="20"></u-gap>
					<text style="line-height: 1; color: rgba(255, 255, 255, 0.6);">AICAT/USDT</text>
				</view>
				<view class="w33 flex-column align-center">
					<text style="line-height: 1; font-size: 32rpx;">{{catPrice}}</text>
					<u-gap height="20"></u-gap>
					<text style="line-height: 1; color: rgba(255, 255, 255, 0.6);">USDT/AICAT</text>
				</view>
				<view class="w33 flex-column align-center">
					<text style="line-height: 1; font-size: 32rpx;">{{rate || 0}}%</text>
					<u-gap height="20"></u-gap>
					<text style="line-height: 1; color: rgba(255, 255, 255, 0.6);">池中份额</text>
				</view>
			</view>

			<view class="lpBtn margin30" @click="lpFu()">预计获得{{ usdtNum }}LP</view>
			<view class="tipVue absolute flex-center align-center">
				*矿工费支付过程中若中途退出，币依旧会扣除，<br> 币返回需要等待5分钟
			</view>
		</view>
	</view>
</template>

<script>
	import wallet from "common/wallet";

  export default {
		data(){
			return {
				catNum: 0,
				usdtNum: 0,
				usdtBalance: 0,
				catBalance: 0,
				catPrice: 0,
				usdtPrice: 0,
				rate: 0,
			}
		},
		async onShow() {
			await this.getList()
			await this.getCat()
			await this.getUsdt()
			await this.getInfo()
		},
		// watch: {
		// 	usdtNum(){
		// 		this.catNum = this.usdtNum * this.catPrice
		// 	},
		// 	catNum(){
		// 		this.usdtNum = this.catNum * this.usdtPrice
		// 	},
		// },
		methods: {
			async lpFu(){
				const res = await this.$request("/front/lp/add", {
					amount: this.usdtNum
				})
				if(res.code===0) {
          await wallet.addLiquidity(res.data.signature, res.data.callData).then(() => {
            this.$u.toast("添加成功")
            this.catNum = ""
            this.usdtNum = ""
            this.getList()
            this.getInfo()
            this.getCat()
            this.getUsdt()
          }).catch(err => {
            this.$u.toast(err.message)
          })
				}else{
					this.$u.toast(res.msg)
				}
			},

			catInput(e){
				this.usdtNum = Number(e.detail.value) * this.usdtPrice
			},

			usdtInput(e){
				this.catNum = Number(e.detail.value) * this.catPrice
			},

			async getList(){
				const res = await this.$request("/front/user/userWallet")
				if(res.code===0) {
					res.data.forEach(item=>{
						if(item.currencyStr=="AICAT") this.catBalance = item.balance
						if(item.currencyStr=="USDT") this.usdtBalance = item.balance
					})
				}
			},
			async getInfo(){
				const res = await this.$request("/front/lp/lpInfo")
				if(res.code===0) {
					// this.userLP = res.data.userLP
					// this.totalLP = res.data.totalLP
					this.rate = res.data.userLP/res.data.totalLP*100
				}
			},
			async getUsdt(){
				const res = await this.$request("/front/lp/getUsdtAmount", {
					amount: 1
				})
				if(res.code===0) {
					this.usdtPrice = res.data
				}
			},
			async getCat(){
				const res = await this.$request("/front/lp/getCatAmount", {
					amount: 1
				})
				if(res.code===0) {
					this.catPrice = res.data
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.box {
		width: 670rpx;
		height: 1000rpx;
		background: url("../../static/financeManagement/box.png") no-repeat;
		background-size: 100% 100%;
		padding: 70rpx 40rpx 40rpx;
		.inner {
			width: 600rpx;
			height: 434rpx;
			.li {
				width: 600rpx;
				height: 194rpx;
				border-radius: 21rpx;
				border: 1rpx solid #45F882;
				padding: 30rpx 40rpx;
				.coin {
					width: 160rpx;
					height: 58rpx;
					border-radius: 29rpx;
					border: 1rpx solid #45F882;
					padding-left: 5rpx;
				}
				.using {
					line-height: 1;
				}
			}
		}
		.lpBtn {
			width: 100%;
			height: 100rpx;
			background: url("../../static/financeManagement/kuang2.png") no-repeat;
			background-size: 100% 100%;
			line-height: 96rpx;
			font-size: 32rpx;
			color: #FFDC02;
			text-align: center;
			font-weight: 600;
		}
		.tipVue {
			width: 100%;
			height: 124rpx;
			left: 0;
			bottom: 0;
			color: #FB5151;
			text-align: center;
		}
	}
</style>
